ShaderGraph検証 : Blendノード
はじめに
ShaderGraphのBlendノードについて検証・調査したものをまとめていきます。
Blendノードを使用することでPhotoshopで採用されているような様々なブレンドモードを使用することができます。
https://gyazo.com/190b14d410630639297ce729559b7e96 https://gyazo.com/1b6c3e5687a240734441d0f152ed8926
このページでは、各種ブレンドモードがどのような計算式になっているのかをまとめると共に、
それらのブレンドモードがどのようなふるまいをするのかを検証したページへのリンクを載せたいと思います
計算式の変数について
$ A : 元から描画されている色 (0 \leqq A \leqq 1)
$ B : 上から重ねる色 (0 \leqq B \leqq 1)
$ C : AとBを合成した結果の色
今回の検証で、変数A, B, Cは以下のように対応しています。
A : BlendノードのBaseインプットへ入力する色
B : BlendノードのBlendインプットへ入力する色
C : Blendノードが出力する色
https://gyazo.com/1166bcea525ec0f7f766c480e8d56733
各種ブレンドモード
スクリーン (Screen)
$ C = 1 - (1 - A)(1 - B)
オーバーレイ (Overlay)
$ \begin{cases} C = 2 A B & (A \leqq 0.5) \\C = 1 – 2(1 – A)(1 – B) & (A \geqq 0.5) \end{cases}
覆い焼き(リニア) (Linear Dodge)
$ C = A + B
覆い焼き(リニア)は、加算ブレンドとも呼ばれています。
焼き込み(リニア) (Linear Burn)
$ C = A + B - 1
覆い焼きカラー (Dodge)
$ C = \frac {A}{(1 - B)}
覆い焼きカラーはColor Dodgeと呼ばれることがあるようです。
焼き込みカラー(Burn)
$ C = 1-\frac{(1-B)}{A}
焼き込みカラーは覆い焼きカラーと対をなすブレンドモードです。
比較(明) (Lighten)
$ C = max(A, B)
ブレンドモードに関する参考リンク
シェーダーグラフのブレンドノードの内部実装コード
Photoshopにおける，レイヤーのブレンドモードについて
ブレンドモード詳説 - osakana.factory
Blend modes - Wikipedia
Photoshopの描画モード(ブレンドモード)を理解するための、画像合成は計算だという話
Photoshop 描画モードの英語表記メモ